<link rel="stylesheet" href="../lib/bootstrap-icons/font/bootstrap-icons.min.css">
<link rel="stylesheet" href="../lib/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="../lib/overlayscrollbars/styles/overlayscrollbars.min.css">
<link rel="stylesheet" href="../dist/css/bootstrap-admin.min.css">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="col-10 pt-2">
    <!--            这里显示商品列表-->
    <!--            themlyme模板显示-->
    <div class="row text-center">
        <div class="col-9"></div>
        <div class="col-3">
            <a data-toggle="modal" data-target="#modalAdd" class="btn btn-warning">新增</a>
        </div>
    </div>
    <table class="table table-bordered">
        <thead>
        <th>序号</th>
        <th>读者姓名</th>
        <th>借书卡号</th>
        <th>借阅图书</th>
        <th>超时记录</th>
        </thead>
        <tr th:each="reader:${data}">
            <td th:text="${reader.getId()}"></td>
            <td th:text="${reader.readername}"></td>
            <td th:text="${reader.getIdCard()}"></td>
            <td th:text="${reader.getBorrow_books()}"></td>
            <td th:text="${reader.getTimeout_record()}"></td>
            <td>
                <button class="btn btn-danger" th:onclick="del([[${reader.getId()}]])">删除</button>
                <button data-toggle="modal" data-target="#modalUpdate" class="btn btn-info"
                        th:onclick="update([[${reader.getId()}]],[[${reader.readername}]],
                                [[${reader.getIdCard()}]],[[${reader.getBorrow_books()}]],[[${reader.getTimeout_record()}]])">更新</button>
            </td>
        </tr>
    </table>
</div>
<!--    模态框测试-->
<!-- 定义一个新增的子窗体模态框（Modal）HTML代码 -->
<div class="modal fade" id="modalAdd" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" style="max-width: 80%;">
        <div class="modal-content">
            <div class="modal-header bg-success text-white">
                <h4 class="modal-title text-center" id="myModalLabel">新增读者信息</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body p-4">
                <!-- 新增表单区 -->
                <form action="/reader/readerAddProcess" method="post">
                    <div class="row">
                        <div class="col-md-6">
                            <label for="readername" class="text-muted">读者姓名</label>
                            <input type="text" name="readername" id="" class="form-control mb-3">
                        </div>
                        <div class="col-md-6">
                            <label for="idCard" class="text-muted">借书卡号</label>
                            <input type="text" name="idCard" id="" class="form-control mb-3">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <label for="borrow_books" class="text-muted">借阅图书</label>
                            <input type="text" name="borrow_books" id="" class="form-control mb-3">
                        </div>
                        <div class="col-md-6">
                            <label for="timeout_record" class="text-muted">超时记录</label>
                            <input type="text" name="timeout_record" id="" class="form-control mb-3">
                        </div>
                    </div>
                    <div class="text-center mt-3">
                        <input type="submit" value="提交" class="btn btn-success">
                        <button type="button" class="btn btn-danger" data-dismiss="modal">关闭</button>
                    </div>
                </form>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>
<!--  定义更新子窗体模态框代码区-->
<!-- 模态框（Modal） -->
<div class="modal fade" id="modalUpdate" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" style="max-width: 80%;">
        <div class="modal-content">
            <div class="modal-header bg-info text-white">
                <h4 class="modal-title text-center" id="myModalLabel">更新读者信息</h4>
            </div>
            <div class="modal-body p-4">
                <form action="/reader/readerUpdateProcess" method="post">
                    <div class="row">
                        <div class="col-md-6">
                            <label for="id" class="text-muted">序号</label>
                            <input type="text" name="id" id="Id" disabled="disabled" class="form-control mb-3">
                        </div>
                        <div class="col-md-6">
                            <label for="readername" class="text-muted">读者姓名</label>
                            <input type="text" name="readername" id="readername" class="form-control mb-3">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <label for="idCard" class="text-muted">借书卡号</label>
                            <input type="text" name="idCard" id="idCard" class="form-control mb-3">
                        </div>
                        <div class="col-md-6">
                            <label for="borrow_books" class="text-muted">借阅图书</label>
                            <input type="text" name="borrow_books" id="borrow_books" class="form-control mb-3">
                        </div>
                        <div class="col-md-6">
                            <label for="timeout_record" class="text-muted">超时记录</label>
                            <input type="text" name="timeout_record" id="timeout_record" class="form-control mb-3">
                        </div>
                    </div>
                    <div class="text-center mt-3">
                        <button type="button" class="btn btn-info" id="btnUpdate">更新</button>
                        <button type="button" class="btn btn-danger" data-dismiss="modal">关闭</button>
                    </div>
                </form>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>



<script src="../js/jquery.js"></script>
<script src="../js/bootstrap.js"></script>
<script>
    function update(id,readername,idCard,borrow_books,timeout_record) {
        //     肯定有了这个商品的信息，包括商品的所有字段值
        console.log(id,readername,borrow_books,timeout_record)
        //     单独去给更新代码块的表单
        $('#Id').val(id);
        $('#readername').val(readername);
        $('#idCard').val(idCard);
        $('#borrow_books').val(borrow_books);
        $('#timeout_record').val(timeout_record);
    }
    // 使用ajax方式提交更新处理
    $('#btnUpdate').click(function(){
        var flag=confirm("确认提交更新？");
        if(flag==true){
            $.post("/api/readerUpdateProcess",{"id":$('#Id').val(),"readername":$('#readername').val(),'idCard':$('#idCard').val(),
                "borrow_books":$('#borrow_books').val(),'timeout_record':$('#timeout_record').val()},function (res){
                if (res==1){
                    alert("更新ok");
                    location.href="/reader/readerList";
                }else {
                    alert("更新失败");
                }
            })
        }
    })
    function del(id){
        var flag = confirm("是否删除该条记录");
        if(flag==true) {
            // 使用ajax方法传参交给后端去处理
            $.post("/api/readerDelete", {"id": id}, function (res) {
                console.log(res)
                if (res == 1) {
                    alert("删除成功！");
                    location.reload();
                } else {
                    alert("删除失败!");
                    location.reload();
                }
            })
        }
    }
    // // 改改改 分页！！！！！！
    // function getData(pageSize, pageIndex) {
    //     $.ajax({
    //         url: 'api/bookListProcess',
    //         type: 'GET',
    //         data: {
    //             pageSize: pageSize,
    //             pageIndex: pageIndex
    //         },
    //         success: function(res) {
    //             console.log("Received response:", res);
    //             // 渲染表格数据
    //             renderTable(res.content);
    //             // 渲染分页信息
    //             renderPagination(res.totalPages, pageSize, pageIndex);
    //         },
    //         error: function(err) {
    //             console.error("Error occurred while getting data:", err);
    //         }
    //     });
    // }
    //
    // function renderTable(data) {
    //     var tbody = $('table tbody');
    //     tbody.empty();
    //
    //     for (var i = 0; i < data.length; i++) {
    //         var tr = $('<tr></tr>');
    //         tr.append('<td>' + data[i].id + '</td>');
    //         tr.append('<td>' + data[i].name + '</td>');
    //         // ... 其他字段
    //         tr.append('<td><button class="btn btn-danger" onclick="del(' + data[i].id + ')">删除</button></td>');
    //         tbody.append(tr);
    //     }
    // }
    //
    // function renderPagination(totalPages, pageSize, pageIndex) {
    //     var paginationContainer = $('#pagination-container'); // 假设你有一个用于显示分页的div元素
    //
    //     paginationContainer.empty();
    //
    //     for (var i = 1; i <= totalPages; i++) {
    //         var pageButton = $('<button class="btn btn-secondary pagination-button">' + i + '</button>');
    //         if (i === pageIndex) {
    //             pageButton.addClass('active');
    //         }
    //         pageButton.click(function (event) {
    //             event.preventDefault();
    //             getData(pageSize, $(this).text());
    //         });
    //         paginationContainer.append(pageButton);
    //     }
    // }
    //
    // $(document).ready(function () {
    //     getData(5, 1); // 默认每页5条数据，从第1页开始
    // });

</script>